<template>
  <!-- 中文注释：缴押金弹窗，包含遮罩层与关闭按钮 -->
  <el-dialog
    v-model="visible"
    title="缴押金"
    width="520px"
    append-to-body
    :close-on-click-modal="true"
    :show-close="true"
  >
    <div class="deposit-box">
      <span class="currency">¥</span>
      <!-- 中文注释：中间数值允许输入修改，保留两位小数 -->
      <el-input-number
        v-model="deposit"
        :min="0"
        :step="1"
        :precision="2"
        controls-position="right"
        class="deposit-input"
      />
    </div>

    <el-divider />

    <div class="payType-title">选择收款方式</div>
    <div class="payType-list">
      <el-button :type="payType === 'cash' ? 'primary' : 'default'" plain @click="payType = 'cash'">
        <i class="iconfont icon-pay-money" /> 现金
      </el-button>
      <el-button :type="payType === 'card' ? 'primary' : 'default'" plain @click="payType = 'card'">
        <i class="iconfont icon-pay-card" /> 银行卡
      </el-button>
      <el-button :type="payType === 'wechat' ? 'primary' : 'default'" plain @click="payType = 'wechat'">
        <i class="iconfont icon-pay-weixin" /> 微信
      </el-button>
      <el-button :type="payType === 'alipay' ? 'primary' : 'default'" plain @click="payType = 'alipay'">
        <i class="iconfont icon-pay-ali" /> 支付宝
      </el-button>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">完成</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DepositPayDialog">
// 中文注释：使用 Vue3 Composition API；支持 v-model 与初始金额
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  initialAmount: { type: Number, default: 0 },
  defaultMethod: { type: String, default: 'cash' },
  admission: { type: Object, default: () => ({}) }
})
const emits = defineEmits(['update:modelValue', 'submit', 'cancel'])

// 中文注释：显隐双向绑定
const visible = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val)
})

// 中文注释：金额与收款方式响应式数据
const deposit = ref(0)
const payType = ref('cash')

watch(
  () => [props.initialAmount, props.defaultMethod],
  ([amt, m]) => {
    deposit.value = Number.isFinite(amt) ? Number(amt) : 0
    payType.value = m || 'cash'
  },
  { immediate: true }
)

// 中文注释：校验并提交
const { proxy } = getCurrentInstance()
import { payDeposit } from '@/api/chargingWork/admissionRegistration'
const handleSubmit = () => {
  if (!props.admission?.patientId) return console.error('请先选择患者')
  if (!props.admission?.hospitalizationNumber) return console.error('请先输入住院号')
  const n = Number(deposit.value)
  if (!Number.isFinite(n)) return proxy.$message?.error?.('请输入数字金额')
  if (n <= 0) return proxy.$message?.error?.('金额需大于 0')
  if (!payType.value) return proxy.$message?.error?.('请选择收款方式')
  const payload = {
    patientId: props.admission?.patientId,
    hospitalizationNumber: props.admission?.hospitalizationNumber,
    deposit: Number(n.toFixed(2)),
    payType: String(payType.value)
  }
  payDeposit(payload).then(res => {
    emits('submit', res)
    visible.value = false
  })
}

// 中文注释：取消关闭弹窗
const handleCancel = () => {
  visible.value = false
  emits('cancel')
}
</script>

<style scoped lang="scss">
.deposit-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #606266;
}
.currency {
  margin-right: 8px;
}
.deposit-input :deep(.el-input__wrapper) {
  box-shadow: none;
  font-size: 28px;
  padding: 0;
}
.deposit-input :deep(.el-input-number__decrease) {
  display: none;
}
.deposit-input :deep(.el-input-number__increase) {
  display: none;
}

.payType-title {
  margin: 12px 0 8px;
  color: #606266;
}
.payType-list {
  display: flex;
  gap: 8px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
